---
layout: default
title: markgroves
---
.container
    .two.columns
        h4 filters
            ul#filters
                li
                    a(href="#", data-filter="*",class='selected') all 
                li.title general
                li
                    a(href="#", data-filter=".b_w") b&w
                li.title subject
                li
                    a(href="#", data-filter=".landscape") landscape
                li
                    a(href="#", data-filter=".street") street
                li
                    a(href="#", data-filter=".portrait") portrait
                li
                    a(href="#", data-filter=".macro") macro
    .fourteen.columns.isotope#photo_grid
        each photo in getCollection('photographs').query().toJSON()
            - var portrait, thumb = ''
            - if (photo.photograph_max_width < photo.photograph_max_height)
                - portrait = 'port'
                - thumb = 'portrait_thumb'
            - else
                - portrait = ''
                - thumb = 'normal_thumb'
            div.photo_thumb.isotope-item(class=portrait+' '+photo.subject+' '+photo.attribute)
                a(href=photo.url)
                    img.clear_thumb(src='/img/blank.gif')
                div(class=thumb, style="background-image: url(#{thumbpath+photo.photograph}); visibility: visible; zoom: 1; opacity: 0.85;")
                div.thumb_details
                    h6.thumb_title= photo.title
                    div.thumb_description
                        div.thumb_details.date= moment(photo.date).utc().format('DD MMMM, YYYY')

script(type='text/javascript').
    //<![CDATA[
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'markgrovesphotography'; // required: replace example with your forum shortname
        var disqus_developer = 1; // developer mode is on
        (function () {
            /* * * DON'T EDIT BELOW THIS LINE * * */
            var s = document.createElement('script'); s.async = true;
            s.type = 'text/javascript';
            s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
            (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());

        $container = $('#photo_grid');
        $(window).load(function () {
            $container.isotope({
                itemSelector: '.photo_thumb',
                masonry: {
                    columnWidth: 12
                }
            });


        });

        $container.isotope({
            itemSelector: '.photo_thumb',
            masonry:{
                columnWidth: 12
            }
        });

        //filter items when filter link is clicked
        $('#filters a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });


        var $optionSets = $('#filters'),
          $optionLinks = $optionSets.find('a');

        $optionLinks.click(function () {
            var $this = $(this);
            // don't proceed if already selected
            if ($this.hasClass('selected')) {
                return false;
            }
            var $optionSet = $this.parents('#filters');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');

            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[key] = value;
            if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
                // changes in layout modes need extra logic
                changeLayoutMode($this, options)
            } else {
                // otherwise, apply new options
                $container.isotope(options);
            }

            return false;
        });


        //]]>